<template>
  <div class="card">
    <div class="box">
      <div class="box-top">
        <div class="title">
          <div class="left">任务看板</div>
          <div class="right">
            <a-button type="link" @click="goback()">查看更多</a-button>
          </div>
        </div>
        <div class="time">
          <span>时间范围:</span>
          <a-date-picker style="width:120px;" v-model="startValue"></a-date-picker>~
          <a-date-picker style="width:120px;" v-model="endValue"></a-date-picker>
        </div>
      </div>
      <div class="content">
        <div class="g2-box">
          <div class="item">
            <div class="item-center">
              <div id="container1" style="width: 150px;height:150px;"></div>
              <div class="title">监护工作</div>
              <div class="text">未完成:11人</div>
            </div>
          </div>
          <div class="item">
            <div class="item-center">
              <div id="container2" style="width: 150px;height:150px;"></div>
              <div class="title">监护工作</div>
              <div class="text">未完成:11人</div>
            </div>
          </div>
        </div>
        <div class="g2-box">
          <div class="item">
            <div class="item-center">
              <div id="container3" style="width: 150px;height:150px;"></div>
              <div class="title">监护工作</div>
              <div class="text">未完成:11人</div>
            </div>
          </div>
          <div class="item">
            <div class="item-center">
              <div id="container4" style="width: 150px;height:150px;"></div>
              <div class="title">监护工作</div>
              <div class="text">未完成:11人</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Liquid } from "@antv/g2plot";
export default {
  props: {},
  data() {
    return {
      startValue: "",
      endValue: "",
    };
  },
  components: {},
  created() {},
  mounted() {
    this.init1();
    this.init2();
    this.init3();
    this.init4();
  },
  methods: {
    goback(){
      this.$router.push("/data_taskList");
    },
    init1() {
      const liquidPlot1 = new Liquid(document.getElementById("container1"), {
        title: {
          visible: false,
          text: "水波图",
        },
        min: 0,
        max: 100,
        value: 20,
        liquidStyle: {
          lineWidth: 3,
          strokeOpacity: 1,
          fill: "#1C11FE",
          stroke: "#a6a6a6",
        },
        statistic: {
          formatter: (value) => ((100 * value) / 100).toFixed(2) + "%",
        },
      });
      liquidPlot1.render();
    },
    init2() {
      const liquidPlot2 = new Liquid(document.getElementById("container2"), {
        title: {
          visible: false,
          text: "水波图",
        },
        min: 0,
        max: 100,
        value: 50,
        color: "#61d791",
        statistic: {
          formatter: (value) => ((100 * value) / 100).toFixed(2) + "%",
        },
      });
      liquidPlot2.render();
    },
    init3() {
      const liquidPlot3 = new Liquid(document.getElementById("container3"), {
        title: {
          visible: false,
          text: "水波图",
        },
        min: 0,
        max: 100,
        value: 20,
        color: "#dd5c5c",
        statistic: {
          formatter: (value) => ((100 * value) / 100).toFixed(2) + "%",
        },
      });
      liquidPlot3.render();
    },
    init4() {
      const liquidPlot4 = new Liquid(document.getElementById("container4"), {
        title: {
          visible: false,
          text: "水波图",
        },
        min: 0,
        max: 100,
        value: 20,
        color: "#61d791",
        statistic: {
          formatter: (value) => ((100 * value) / 100).toFixed(2) + "%",
        },
      });
      liquidPlot4.render();
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.box {
  background: #fff;
  border-top: 1px solid transparent;
  height: 500px;
  margin-bottom: 20px;
  .box-top {
    height: 85px;
    border-bottom: 1px solid #eee;
    .title {
      margin: 10px 15px 0;
      display: flex;
      justify-content: space-between;
    }
    .time {
      margin: 5px 15px 0;
    }
  }
  .g2-box {
    display: flex;
    .item {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      .item-center {
        text-align: center;
        .text {
          font-size: 13px;
          color: #939ea8;
        }
      }
    }
  }
}
</style>